<script setup lang="ts">
import { computed } from 'vue'

const props = defineProps({
  value: {
    type: [String, Number],
    default: ''
  },
  max: {
    type: Number,
    required: false
  },
  isDot: {
    type: Boolean,
    required: false
  },
  hidden: {
    type: Boolean,
    required: false
  },
  type: {
    type: String,
    validator(val: string): boolean {
      return ['primary', 'success', 'warning', 'info', 'danger'].indexOf(val) > -1
    },
    default: 'info'
  }
})

const content = computed(() => {
  if (props.isDot) return ''
  const value = props.value
  const max = props.max
  if (max && typeof value === 'number') {
    return max < value ? `${max}+` : value
  }
  return value
})
</script>
<template>
  <div class="badge" :class="`is-${type}`">
    <slot />
    <sup
      v-show="!hidden && (content || content === 0 || isDot)"
      class="badge-content is-fixed"
      :class="{ 'is-dot': isDot }"
      v-text="content"
    />
  </div>
</template>
